<template>
  <div class="home w-100% h-100% bg-black text-16px fw-600">
    <dv-border-box-11
      pt-60
      p-x-20
      pb-20
      box-border
      title="厂区态势监测数据展示大屏"
      :title-width="300"
    >
      <div class="w-100% h-100%" flex>
        <div class="h-100%" w-400>
          <dv-border-box-1 class="w-100% important-h-50%">
            <div class="w-100% h-100%" flex items-center justify-center>
              <dv-active-ring-chart :config="config[0]" class="w-100% h-100%" />
            </div>
          </dv-border-box-1>

          <dv-border-box-1 class="w-100% important-h-50%">
            <div class="w-100% h-100%" flex items-center justify-center>
              <dv-capsule-chart :config="config[1]" class="w-80% h-80%" />
            </div>
          </dv-border-box-1>
        </div>

        <div class="h-100%" flex-1>
          <dv-border-box-1 class="w-100% h-100%">
            <div class="w-100% h-100% relative" p-24 overflow-hidden box-border>
              <div class="absolute top-0 right-24 z-999">
                <el-button-group size="small">
                  <el-button @click="handleChangeImg">改变图片</el-button>
                  <el-button @click="handleChangeOption">改变样式</el-button>
                </el-button-group>
              </div>
              <my-chart :default-option="defaultOption"  :option="option"></my-chart>
            </div>
          </dv-border-box-1>
        </div>
        <div class="h-100%" w-400>
          <dv-border-box-1 class="w-100% important-h-50%">
            <div class="w-100% h-100%" flex items-center justify-center>
              <dv-water-level-pond :config="config[2]" class="w-300 h-300" />
            </div>
          </dv-border-box-1>
          <dv-border-box-1 class="w-100% important-h-50%">
            <div class="w-100% h-100%" flex items-center justify-center>
              <dv-conical-column-chart
                :config="config[3]"
                class="w-80% h-50%"
              />
            </div>
          </dv-border-box-1>
        </div>
      </div>
    </dv-border-box-11>
  </div>
</template>

<script>
// @ is an alias to /src
import MyChart from "../components/my-chart.vue"

import {defaultOption,loadImage,updateOption} from "./homeChart.js"
import {img64} from "./img.js"
import {imgurl as img1} from "./img2.js"
import {imgurl as img2} from "./img3.js"
export default {
  name: "HomeView",
  components: {MyChart},
  data: () => ({
    config: [
      {
        radius: "40%",
        activeRadius: "45%",
        data: [
          { name: "周口", value: 55 },
          { name: "南阳", value: 120 },
          { name: "西峡", value: 78 },
          { name: "驻马店", value: 66 },
          { name: "新乡", value: 80 },
        ],
        digitalFlopStyle: { fontSize: 20 },
        showOriginValue: true,
      },
      {
        data: [
          { name: "南阳", value: 167 },
          { name: "周口", value: 67 },
          { name: "漯河", value: 123 },
          { name: "郑州", value: 55 },
          { name: "西峡", value: 98 },
        ],
      },
      { data: [55], shape: "round" },
      {
        data: [
          { name: "周口", value: 55 },
          { name: "南阳", value: 120 },
          { name: "西峡", value: 71 },
          { name: "驻马店", value: 66 },
          { name: "新乡", value: 80 },
          { name: "信阳", value: 35 },
          { name: "漯河", value: 15 },
        ],
        img: [
          "http://datav.jiaminghi.com/img/conicalColumnChart/1st.png",
          "http://datav.jiaminghi.com/img/conicalColumnChart/2st.png",
          "http://datav.jiaminghi.com/img/conicalColumnChart/3st.png",
          "http://datav.jiaminghi.com/img/conicalColumnChart/4st.png",
          "http://datav.jiaminghi.com/img/conicalColumnChart/5st.png",
          "http://datav.jiaminghi.com/img/conicalColumnChart/6st.png",
          "http://datav.jiaminghi.com/img/conicalColumnChart/7st.png",
        ],
        showValue: true,
      },
    ],
    option:{},
    imgurl:'',
    max:256
  }),
  computed:{
    defaultOption(){
      return defaultOption;
    },
  },
  methods:{
    initOption(ops = {}){
      loadImage(this.imgurl,(d,w,h) => {
        this.option = {...ops,...updateOption(d,w,h)}
      })
    },
    handleChangeImg(){
      this.imgurl = this.imgurl == img1 ? img2 : img1;
      this.initOption();
    },
    handleChangeOption(){
      this.max = this.max == 256 ? 128 : 256;

      this.initOption({
        visualMap: {
    show: false,
    min: 20,
    max: this.max,
    inRange: {
      color: [
        '#313695',
        '#4575b4',
        '#74add1',
        '#abd9e9',
        '#e0f3f8',
        '#ffffbf',
        '#fee090',
        '#fdae61',
        '#f46d43',
        '#d73027',
        '#a50026'
      ]
    }
  },
      })
    },
  },
  created(){
    this.imgurl = img1;
    this.initOption();
  }
};
</script>
